<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <link rel="stylesheet" href="register1.css?v=<%=System.currentTimeMillis()%>">
    <link rel="stylesheet" href="register2.css?v=<%=System.currentTimeMillis()%>">
    <script src="register.js"></script>
    <link rel="icon" type="image/x-icon" href="res/favicon.ico"/>
    <script>
        function hand(){
            console.log("进入回调函数");
            if(httpRequest.readyState==4){
                if(httpRequest.responseText=="true"){
                    console.log("已经注册过");
                    //号码已经注册过
                    var h = document.getElementsByClassName("scrollCheck")[0];
                    h.style = "display:none;";
                    document.getElementById("info").innerHTML = "此号码已注册,可以直接登录";
                    document.getElementById("info").style.color = "#ff9911";
                }else{
                    valid_ = true;//验证码有效
                    var h = document.getElementsByClassName("scrollCheck")[0];
                    h.style = "display:none;";
                    document.getElementById("info_").innerHTML = "验证码在120内有效";
                    document.getElementById("info_").style.display = "block";
                    document.getElementById("info_").style.color = "#dacbcb";
                    document.getElementById("qr").style = "display:block;";
                    document.getElementById("ch").style = "display:none;";
                    daoji = setInterval(time_less, 1000);
                    //开始发送验证码
                    code_ = getCode();
                    // window.open("http://localhost:8520/mid/codeSend?mobile="
                    //     + encodeURI(document.getElementById("mobile").value) + "&code=" + encodeURI(code_));
                    var url = "codeSend";
                    var params = "mobile=" + encodeURI(document.getElementById("mobile").value) +
                        "&code=" + encodeURI(code_);
                    sendRequest(url, params, "POST", null);
                }
            }
        }
        window.onload = function () {
            var cilcked = 0;
            var oDiv = document.getElementById("bow");
            var _1_ = document.getElementById("_1_");
            var bbox = document.getElementById("bbox");
            oDiv.onmousedown = function () {
                var startX = document.getElementById("scroll").getBoundingClientRect().left;
                cilcked = 1;
                if (cilcked) {
                    document.onmousemove = function (ev) {
                        var event = window.event || ev;
                        X = event.clientX - startX;
                        if (X <= 0) X = 0;
                        if (X >= 328) X = 328;
                        // oDiv.style.left = X + "px";
                        bbox.style.left = X + "px";
                        _1_.style.left = (X * 1.0 / 328 * 310) + "px";
                        document.getElementById("scroll2").style.width = (X + 22) + "px";
                    }
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    cilcked = 0;
                    if ((X * 1.0 / 328 * 310) >= (lefts[pngno] - 2) && (X * 1.0 / 328 * 310) <= (lefts[pngno] + 2)) {
                        isOK = true;
                        document.getElementById("scroll2").style.width = "360px";
                        document.getElementById("bbox").style = "display:none;";
                        document.getElementById("scroll2").innerHTML = "拼接成功";
                        setTimeout(function () {
                            //发送验证码之前检测手机是否注册过
                            var url="checkMobile";
                            var params = "mobile="+encodeURI(document.getElementById("mobile").value);
                            sendRequest(url,params,"POST",hand);
                        }, 500);
                    } else {
                        document.getElementById("scroll2").style.backgroundColor = "#ff5b57";
                        setTimeout(function () {
                            document.getElementById("bbox").style.left = "0px";
                            document.getElementById("_1_").style.left = "0px";
                            document.getElementById("scroll2").style.width = "0px";
                            document.getElementById("scroll2").style.backgroundColor = "#41c2fc";
                            onloadPng();
                        }, 500);
                    }
                    document.onmouseup = null;
                }
            }
        }

        function next() {
            var input1 = document.getElementById("input1");
            var input2 = document.getElementById("input2");
            var button1 = document.getElementById("button1");
            var button2 = document.getElementById("button2");
            var str = document.getElementById("yan_").value;
            if (str == code_ && isOK && valid_) {
                var mobile = document.getElementById("mobile").value;
                location.href = "register_step2.jsp" + "?" + "mobile=" + encodeURI(mobile);
            } else if (!isOK) {
                document.getElementById("info_").innerHTML = "请完成验证";
                document.getElementById("info_").style.display = "block";
                document.getElementById("info_").style.color = "#ff9911";
            } else if (!valid_) {
                document.getElementById("info_").style.display = "block";
                document.getElementById("info_").innerHTML = "验证码已过期";
                document.getElementById("info_").style.color = "#ff9911";
            } else {
                document.getElementById("info_").style.display = "block";
                document.getElementById("info_").innerHTML = "验证码错误";
                document.getElementById("info_").style.color = "#ff9911";
            }
        }
    </script>
</head>
<body>
<%
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
%>
<div class="header">
    <div class="img">
        欢迎注册
    </div>
    <div class="tologin">
        已有账号? <a href="login.jsp">请登录></a>
    </div>
</div>
<div class="body">
    <div class="scrollCheck">
        <div class="textwan">完成拼图验证</div>
        <button class="changeone" onclick="change()">换一张</button>
        <button id="close" onclick="close_()"></button>
        <div id="img_">
            <img src="./res/c14.png" id="_1">
            <img id="_1_" src="./res/c14_14.png" style="position: absolute;top:23px;left:0px;">
        </div>
        <div id="scroll" class="scroll">
            向右滑动完成拼图
            <div id="bbox">
                <div id="bow" class="bow"></div>
            </div>
        </div>
        <div class="scroll" id="scroll2"></div>
        <div class="sanjiao"></div>
    </div>
    <div class="box" id="box1">
        <div class="top" id="top">
            <div class="bbox selected">
                <div class="cir cir_" id="cir_1">
                    1
                </div>
                验证手机号
            </div>
            <div class="bbox" style="margin-left: 62px;" id="bbox2">
                <div class="cir" id="cir_2">
                    2
                </div>
                填写账号信息
            </div>
            <div class="bbox" style="float: right;" id="bbox3">
                <div class="cir" id="cir_3">
                    3
                </div>
                注册成功
            </div>
            <div id="dd1"
                 style="position: absolute;top:8px;left:65px;width: 124px;height: 10px;background-image: url(./res/diandian.png);"></div>
            <div id="dd2"
                 style="position: absolute;top:8px;left:230px;width: 124px;height: 10px;background-image: url(./res/diandian.png);"></div>
        </div>
        <div class="input" id="input1">
            <div class="number">
                <span style="font-size:14px;display: inline-block;height: 48px; width: 80px; padding-left:20px;color:#666666;border: 1px #e6e6e6 solid;">中国 0086</span>
                <input id="mobile" type="text" placeholder="建议常用的手机号" maxlength="11" onkeyup="check()">
            </div>
            <div class="info" id="info">验证完成后,你可以使用该手机登录或找回密码</div>
            <div class="qr" id="qr">
                <span id="yan"
                      style="display: inline-block; color:#666;text-align: center; width: 100px;height:48px;border: 1px #e6e6e6 solid;">手机验证码</span>
                <input type="text" maxlength="6" id="yan_">
                <span id="djs" onclick="cxhuoqu()" style="height: 47px;">120秒后重新获取</span>
            </div>
            <div class="info" id="info_">验证码在120秒内有效</div>
            <button onclick="send()" id="ch">点击按钮进行验证</button>
        </div>
        <div class="button" id="button1">
            <button onclick="next()">下一步</button>
        </div>
        <div class="bottom" id="bottom1" style="margin-top: 10px;">
            <span style="background-image: url(./res/leftpng.png);background-repeat: no-repeat;"><a href="#">企业用户注册</a></span>
            <span style="float: right; margin-right: 20px;background-image: url(./res/rightpng.png);background-repeat: no-repeat;"><a
                    href="#">海外用户注册</a></span>
        </div>
    </div>
</div>
<div class="footer">
    <div class="ftext">
        <ul>
            <li><a href="#" style="border: none;">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">商家入驻</a></li>
            <li><a href="#">广告服务</a></li>
            <li><a href="#">手机京东</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">销售联盟</a></li>
            <li><a href="#">京东社区</a></li>
            <li><a href="#">京东公益</a></li>
            <li><a href="#">English Site</a></li>
        </ul>
        <br>
        <span style="font-size:12px;color:#999;margin-left:400px;">Copyright©2004-2021  京东JD.com 版权所有</span>
    </div>
</div>
<div class="line"></div>
</body>
</html>
